<template>
  <el-dialog
    :visible="show"
    :title="'导入' + crmTypeName"
    :append-to-body="true"
    :close-on-click-modal="false"
    width="750px"
    @close="closeView"
  >
    <div class="dialog-body">
      <!-- <el-steps :active="stepsActive" simple>
        <el-step
          v-for="(item, index) in stepList"
          :key="index"
          :title="item.title"
          :icon="item.icon"
          :status="item.status"
        />
      </el-steps> -->
      <!-- 新增 -->
      <div class="step_box">
        <div
          v-for="(item, index) in stepList"
          :key="index"
          :class="stepClass(item, index)"
        >
          <div></div>
          <span class="d-flex align-items-center">
            <i
              class="el-icon-error"
              style="color: #f56c6c"
              v-if="item.status == 'error'"
            />
            <i :class="item.icon" v-else />
            <span v-if="item.status == 'error'">导入失败</span>
            <span v-else>{{ item.title }}</span>
          </span>
          <div></div>
        </div>
      </div>
      <!-- 新增 end -->

      <div v-if="stepsActive == 1" class="step-section">
        <div class="sections" v-if="config.contactsenter != 'contacts_enter1'">
          <div class="sections__title">
            一、请按照数据模板的格式准备要导入的数据。<span
              class="download"
              @click="download"
              v-if="this.crmType !== 'contacts'"
              >点击下载《{{ crmTypeName }}导入模板》</span
            >
          </div>
          <div class="sections__tips">
            导入文件请勿超过2MB（约10,000条数据）
          </div>
        </div>
        <div v-if="config.repeatHandleShow" class="sections">
          <div class="sections__title">
            二、请选择数据重复时的处理方式{{
              config.repeatRuleShow
                ? `（查重规则：【${fieldUniqueInfo}】）`
                : ""
            }}
          </div>
          <div v-if="config.repeatRuleShow" class="sections__tips">
            查重规则为：添加{{
              crmTypeName
            }}时所需填写的所有唯一字段，当前设置唯一字段为：{{
              fieldUniqueInfo
            }}
          </div>
          <div class="content">
            <el-select v-model="repeatHandling" placeholder="请选择">
              <el-option
                v-for="(item, index) in this.crmType == 'leads'
                  ? [
                      { name: '覆盖原有数据', value: 1 },
                      { name: '跳过', value: 2 },
                      { name: '重复新建', value: 3 }
                    ]
                  : [
                      { name: '覆盖系统原有数据', value: 1 },
                      { name: '跳过', value: 2 },
                    ]"
                :key="index"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </div>
        </div>
        <div class="sections">
          <div class="sections__title">
            {{
              config.repeatHandleShow
                ? "三"
                : config.contactsenter != "contacts_enter1"
                ? "二"
                : "一"
            }}、{{
              config.contactsenter != "contacts_enter1"
                ? "请选择需要导入的文件"
                : "请选择需要导入的问卷调查表csv文件"
            }}
          </div>
          <div class="content">
            <flexbox class="file-select">
              <el-input v-model="file.name" :disabled="true" />
              <el-button type="primary" @click="selectFile">选择文件</el-button>
            </flexbox>
          </div>
        </div>
        <div v-if="crmType=='vipStudents'" class="vip_import_tips">*导入的vip学员数据，通过手机号/微信匹配</div>
        <template v-if="!['overdue', 'receivables'].includes(crmType)">
          <div v-if="config.ownerSelectShow" class="sections">
            <div class="sections__title">
              {{
                config.contactsenter != "contacts_enter1" ? "四" : "二"
              }}、请选择{{ crmType == "leads" ? "销售" : "" }}负责人（{{
                crmType == "leads" ? "销售" : ""
              }}负责人为必填字段，若不填写，则会导致导入失败）
            </div>
            <div class="content">
              <div class="user-cell">
                <user-Select v-model="user" style="width: 100%"> </user-Select>
              </div>
            </div>
          </div>
        </template>
        <template v-if="crmType == 'leads'">
          <div class="sections">
            <div class="sections__title">
              五、请选择线索负责人（线索负责人为必填字段，若不填写，则会导致导入失败）
            </div>
            <div class="content">
              <div class="user-cell">
                <user-Select v-model="leadsUserId" style="width: 100%">
                </user-Select>
              </div>
            </div>
          </div>
        </template>
        <div
          v-if="
            config.ownerSelectShow & (config.contactsenter == 'contacts_enter1')
          "
          class="sections"
        >
          <div class="sections__title">三、请输入vip期数（必填字段）</div>
          <div class="content">
            <div class="user-cell">
              <el-input
                placeholder="请输入vip期数"
                v-model="vip_qishu"
                clearable
              >
              </el-input>
            </div>
          </div>
        </div>
        <div
          v-if="
            config.ownerSelectShow & (config.contactsenter == 'contacts_enter1')
          "
          class="sections"
          style="margin-top: 10px"
        >
          <div class="sections__title">
            四、导入过程中可以关闭该界面，到通知去下载文件，或者等待导入完成直接下载文件
          </div>
        </div>
        <div
          v-if="
            config.ownerSelectShow & (config.contactsenter == 'contacts_enter1')
          "
          class="sections"
          style="margin-top: 25px"
        >
          <div class="sections__title">
            五、下载的文件为一个压缩包，里面有两个文件，一个文件是contacts_import_xxxx.xls，这个文件可以直接上传联系人，另一个文件是contacts_import_error_xxx.xls，这个文件由于无法找到与之对应的学员信息，所以没有自动填入系统编号和学员姓名，请您手动解决此问题。
          </div>
        </div>
        <div v-if="config.poolSelectShow" class="sections">
          <div class="sections__title">四、请选择公海</div>
          <div class="content">
            <div class="user-cell">
              <el-select v-model="poolId" placeholder="请选择">
                <el-option
                  v-for="item in poolList"
                  :key="item.poolId"
                  :label="item.poolName"
                  :value="item.poolId"
                />
              </el-select>
            </div>
          </div>
        </div>
      </div>

      <div
        v-loading="loading"
        v-else-if="stepsActive == 2"
        :element-loading-text="importLoadingText"
        element-loading-spinner="el-icon-loading"
        class="step-section"
      >
        <div class="step-section__tips">
          当前数据正在导入，您可以点击【最小化】隐藏该页面，数据导入不受影响。
        </div>
      </div>

      <div
        v-loading="loading"
        v-else-if="stepsActive == 3"
        class="step-section"
      >
        <div class="result-info">
          <i
            class="el-icon-error result-info__erroricon"
            v-if="stepList[stepList.length - 1].status == 'error'"
          />
          <i class="wk wk-success result-info__icon" v-else />
          <p
            class="result-info__des"
            v-if="stepList[stepList.length - 1].status == 'error'"
          >
            数据导入失败
          </p>
          <p class="result-info__des" v-else>数据导入完成</p>
          <p
            v-if="resultData & (config.contactsenter != 'contacts_enter1')"
            class="result-info__detail"
          >
            导入总数据<span class="result-info__detail--all">{{
              resultData.totalSize
            }}</span
            >条，<template v-if="resultData.updateSize"
              >覆盖<span class="result-info__detail--suc">{{
                resultData.updateSize
              }}</span
              >条，</template
            >导入成功<span class="result-info__detail--suc">{{
              resultData.totalSize - resultData.errSize
            }}</span
            >条，导入失败<span class="result-info__detail--err">{{
              resultData.errSize
            }}</span
            >条
          </p>
          <span
            v-if="config.contactsenter == 'contacts_enter1'"
            style="
              color: #2362fb;
              cursor: pointer;
              margin-top: 10px;
              display: block;
            "
            @click="enterDetail"
            >点击下载对照数据</span
          >
          <el-button
            v-if="
              resultData &&
              (resultData.errSize > 0) &
                (config.contactsenter != 'contacts_enter1')
            "
            class="result-info__btn--err"
            type="text"
            @click="downloadErrData"
            >下载错误数据</el-button
          >
        </div>
      </div>

      <input id="importInputFile" type="file" @change="uploadFile" />
    </div>
    <span slot="footer" class="dialog-footer">
      <el-popover
        v-model="historyPopoverShow"
        placement="top"
        width="800"
        popper-class="no-padding-popover"
        trigger="click"
      >
        <c-r-m-import-history
          :show="historyPopoverShow"
          :crm-type="crmType"
          :props="props"
          @close="historyPopoverShow = false"
        />
        <el-button
          slot="reference"
          class="history-btn"
          type="text"
          v-if="config.contactsenter != 'contacts_enter1'"
          >查看历史导入记录</el-button
        >
      </el-popover>

      <el-button :class="{ 'is-hidden': !showCancel }" @click="closeView"
        >取消</el-button
      >
      <el-button v-if="sureTitle" type="primary" @click="sureClick">{{
        sureTitle
      }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {
  crmQueryImportNumAPI,
  crmQueryImportInfoAPI,
  crmDownImportErrorAPI,
  filedGetFieldAPI,
} from "@/api/crm/common";
import {
  crmCustomerExcelImportAPI,
  crmCustomerDownloadExcelAPI,
  crmCustomerPoolNameListAPI,
  crmCustomerPoolExcelImportAPI,
} from "@/api/crm/customer";
import {
  crmCustomerVipExcelImportAPI,
  crmCustomerVipDownloadExcelAPI,
} from "@/api/crm/vipStudents";
import {
  crmLeadsExcelImportAPI,
  crmLeadsDownloadExcelAPI,
} from "@/api/crm/leads";
import {
  crmRoiExcelImportAPI,
  crmRoiDownloadExcelAPI,
} from "@/api/crm/roiMoney";
import {
  crmContactsExcelImportAPI,
  crmContactsDownloadExcelAPI,
  crmContactsonExcelImportAPI,
} from "@/api/crm/contacts";
import {
  crmProductExcelImportAPI,
  crmProductDownloadExcelAPI,
} from "@/api/crm/product";

import { XhUserCell } from "@/components/CreateCom";
import CRMImportHistory from "./CRMImportHistory";

import {
  crmOverdueDownloadExcelAPI,
  crmOverdueExcelImportAPI,
} from "@/api/crm/overdue";

import {
  crmReceivablesDownloadExcelAPI,
  crmReceivablesExcelImportAPI,
} from "@/api/crm/receivables";

import { mapGetters } from "vuex";
import crmTypeModel from "@/views/crm/model/crmTypeModel";
import { downloadExcelWithResData, verifyFileTypeWithFileName } from "@/utils";
import Lockr from "lockr";
import merge from "@/utils/merge";
import UserSelect from "@/views/admin/components/UserSelect"; // 人员单选
const DefaultProps = {
  typeName: "", // 模块名称
  ownerSelectShow: true,
  poolSelectShow: false,
  repeatHandleShow: true,
  repeatRuleShow: true, // 步骤二的重复规则是否展示
  importRequest: null, // 导入请求
  templateRequest: null, // 模板请求
  contactsenter: null,
};

export default {
  name: "CRMImport", // 文件导入
  components: {
    XhUserCell,
    CRMImportHistory,
    UserSelect,
  },
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    // CRM类型
    crmType: {
      type: String,
      default: "",
    },
    props: {
      type: Object,
      default: () => {
        return {};
      },
    },
    // 是有缓存的信息展示的页面 是否完成状态
    cacheShow: {
      type: Boolean,
      default: false,
    },
    cacheDone: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      loading: false,
      fieldList: [],
      repeatHandling: 2, // 	1 覆盖，2跳过
      file: {
        name: "",
      },
      user: "",
      leadsUserId: "", //线索负责人
      vip_qishu: "", //vip问卷期数

      // 公海数据
      poolId: "",
      poolList: [],

      stepsActive: 1,
      stepList: [
        {
          icon: "wk wk-upload",
          title: "上传文件",
          status: "wait",
        },
        {
          icon: "wk wk-data-import",
          title: "导入数据",
          status: "wait",
        },
        {
          icon: "wk wk-success",
          title: "导入完成",
          status: "wait",
        },
      ],
      resultData: null,
      processData: {
        count: 0,
        status: "",
      },
      messageId: null,
      intervalTimer: null,

      historyPopoverShow: false,
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),

    crmTypeName() {
      if (this.props && this.props.typeName) {
        return this.props.typeName;
      }

      return (
        {
          customer: "学员",
          leads: "线索",
          contacts:
            this.config.contactsenter == "enter" ? "联系人" : "问卷调查表",
          product: "产品",
          roiMoney: "投放金额",
          putinStatistics: "投放统计",
          vipStudents: "VIP学员",
        }[this.crmType] || ""
      );
    },

    importLoadingText() {
      if (this.processData.count) {
        return `数据导入中（当前已导入${this.processData.count}条）`;
      }

      return "数据导入中";
    },

    sureTitle() {
      return {
        1: "立即导入",
        2: "最小化",
        3: "确定",
      }[this.stepsActive];
    },

    showCancel() {
      return this.stepsActive != 2;
    },

    fieldUniqueInfo() {
      const uniqueList = this.fieldList.filter((item) => item.isUnique == 1);

      return uniqueList.map((item) => item.name).join("/") || "无";
    },

    config() {
      console.log("测试打印配置-------------");
      console.log(
        merge(
          {
            ...DefaultProps,
          },
          this.props || {}
        )
      );
      return merge(
        {
          ...DefaultProps,
        },
        this.props || {}
      );
    },
  },
  watch: {
    cacheShow: {
      handler(val) {
        // 展示缓存
        if (val) {
          this.$emit("update:cacheShow", false);
          const beforeImportInfo = Lockr.get("crmImportInfo");
          if (beforeImportInfo && beforeImportInfo.messageId) {
            this.loading = true;
            this.messageId = beforeImportInfo.messageId;
            this.stepList[0].status = "finish";

            if (this.cacheDone) {
              this.stepList[1].status = "finish";
              this.stepsActive = 3;
              this.thirdQueryResult();
            } else {
              this.stepsActive = 2;
              this.stepList[1].status = "process";
            }

            this.loopSecondQueryNum();
          }
        }
      },
      immediate: true,
    },
    vip_qishu: function () {
      this.getFirstStepStatus();
    },
    show: function (val) {
      if (val) {
        // 阶段一展示 需要获取的信息
        if (this.stepsActive == 1) {
          if (this.userInfo) {
            this.user = this.userInfo.userId;
            this.leadsUserId = this.userInfo.userId;
          }

          if (this.config.poolSelectShow) {
            this.getPoolList();
          }

          if (this.config.repeatRuleShow && this.config.repeatHandleShow) {
            this.getField();
          }
        }
      } else {
        if (this.stepsActive == 3) {
          this.resetData();
        }

        this.fieldList = [];
      }
    },

    stepsActive() {
      this.$emit(
        "status",
        {
          1: "wait",
          2: "process",
          3: "finish",
        }[this.stepsActive]
      );
    },

    // file() {
    //   this.getFirstStepStatus()
    // },

    // user() {
    //   this.getFirstStepStatus()
    // }
  },
  created() {},
  methods: {
    stepClass(item, index) {
      if (item.status == "wait") {
        return "step_" + (index + 1);
      }
      if (item.status == "finish") {
        return "step_" + (index + 1) + " " + "step_finish_" + (index + 1);
      }
      if (item.status == "process") {
        return "step_" + (index + 1) + " " + "step_process_" + (index + 1);
      }
      if (item.status == "error") {
        return "step_" + (index + 1) + " " + "step_error_" + (index + 1);
      }
    },
    //下载对照数据
    enterDetail() {
      // console.log(this.messageId)
      var messageId = this.messageId;
      crmDownImportErrorAPI({ messageId })
        .then((res) => {
          downloadExcelWithResData(res);
        })
        .catch(() => {});
    },
    sureClick() {
      if (this.stepsActive == 1) {
        if (this.stepList[0].status == "finish") {
          this.stepList[1].status = "process";
          this.stepsActive = 2;
          this.firstUpdateFile((res) => {
            this.messageId = res.data;
            // 写入本次缓存
            Lockr.set("crmImportInfo", {
              messageId: this.messageId,
              crmProps: this.config,
              crmType: this.crmType,
            });

            this.loopSecondQueryNum();
          });
        } else {
          if (!this.file.name) {
            this.$message.error("请选择导入文件");
          } else if (
            this.config.ownerSelectShow &&
            this.config.contactsenter == "contacts_enter1" &&
            this.vip_qishu == ""
          ) {
            this.$message.error("请输入vip期数");
          } else if (this.config.ownerSelectShow && !this.user) {
            this.$message.error("请选择负责人");
          } else if (this.crmType == "leads") {
            if (!this.leadsUserId) {
              this.$message.error("请选择线索负责人");
            }
          }
        }
      } else {
        this.closeView();
      }
    },

    /**
     * 第一步上传
     */
    firstUpdateFile(result) {
      const params = {};
      params.repeatHandling = this.repeatHandling;
      params.file = this.file;
      params.ownerUserId = this.user;
      params.leadsUserId = this.leadsUserId;

      if (this.config.poolSelectShow) {
        params.poolId = this.poolId;
      }
      if (this.config.contactsenter == "contacts_enter1") {
        params.vipPeriods = this.vip_qishu;
      }
      const request =
        this.config.importRequest ||
        {
          customer: this.config.poolSelectShow
            ? crmCustomerPoolExcelImportAPI
            : crmCustomerExcelImportAPI,
          leads: crmLeadsExcelImportAPI,
          contacts:
            this.config.contactsenter == "enter"
              ? crmContactsExcelImportAPI
              : crmContactsonExcelImportAPI,
          product: crmProductExcelImportAPI,
          roiMoney: crmRoiExcelImportAPI,
          vipStudents: crmCustomerVipExcelImportAPI,
          overdue: crmOverdueExcelImportAPI,
          receivables: crmReceivablesExcelImportAPI,
        }[this.crmType];
      this.loading = true;
      request(params)
        .then((res) => {
          if (result) {
            result(res);
          }
        })
        .catch(() => {
          if (result) {
            result(false);
          }
          this.loading = false;
        });
    },

    /**
     * 第二步查询数量
     */
    loopSecondQueryNum() {
      this.secondQueryNum();
      this.intervalTimer = setInterval(() => {
        if (this.processData.status == "end") {
          clearInterval(this.intervalTimer);
          this.intervalTimer = null;
          this.thirdQueryResult();
        } else {
          this.secondQueryNum();
        }
      }, 2000);
    },

    secondQueryNum() {
      crmQueryImportNumAPI({
        messageId: this.messageId,
      })
        .then((res) => {
          if (res.data === null) {
            this.processData.status = "end";
          } else {
            this.processData.status = "";
            this.processData.count = res.data;
          }
        })
        .catch(() => {
          // this.processData.status = 'err'
        });
    },

    /**
     * 第三部 查询结果
     */
    thirdQueryResult() {
      crmQueryImportInfoAPI({
        messageId: this.messageId,
      })
        .then((res) => {
          setTimeout(() => {
            this.$bus.emit("document-visibility", "visible");
          }, 2500);
          this.loading = false;
          this.stepList[1].status = "finish";
          this.stepsActive = 3;
          this.$emit("status", "finish");
          if (res) {
            this.resultData = res.data;
            if (res.data.errSize > 0) {
              this.stepList[2].status =
                this.config.contactsenter != "contacts_enter1"
                  ? "error"
                  : "finish";
            } else {
              this.stepList[2].status = "finish";
            }
          }
        })
        .catch(() => {});
    },

    /**
     * 下载错误模板
     */
    downloadErrData() {
      this.loading = true;
      crmDownImportErrorAPI({
        messageId: this.messageId,
      })
        .then((res) => {
          downloadExcelWithResData(res);
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },

    // 下载模板操作
    download() {
      const request =
        this.config.templateRequest ||
        {
          customer: crmCustomerDownloadExcelAPI,
          leads: crmLeadsDownloadExcelAPI,
          contacts: crmContactsDownloadExcelAPI,
          product: crmProductDownloadExcelAPI,
          roiMoney: crmRoiDownloadExcelAPI,
          vipStudents: crmCustomerVipDownloadExcelAPI,
          overdue: crmOverdueDownloadExcelAPI,
          receivables: crmReceivablesDownloadExcelAPI,
        }[this.crmType];
      request()
        .then((res) => {
          downloadExcelWithResData(res);
        })
        .catch(() => {});
    },
    // 选择文件
    selectFile() {
      document.getElementById("importInputFile").click();
    },
    /** 图片选择出发 */
    uploadFile(event) {
      var files = event.target.files;
      const file = files[0];
      var filetype =
        this.config.contactsenter == "contacts_enter1" ? "csv" : "excel";
      if (verifyFileTypeWithFileName(file.name, filetype)) {
        this.file = file;
        // 阶段一状态
        this.getFirstStepStatus();
      }
      event.target.value = "";
    },
    // 用户选择
    userSelect1(data) {
      this.user = data;
      this.getFirstStepStatus();
    },
    userSelect2(data) {
      this.leadsUserId = data;
      this.getFirstStepStatus();
    },
    getFirstStepStatus() {
      // 阶段一状态
      const hasFile = this.file && this.file.size;
      const hasUser = this.user;
      const hasLeadsUser = this.leadsUserId;
      const hasvip =
        this.config.contactsenter != "contacts_enter1"
          ? true
          : this.vip_qishu != "";

      if (this.config.ownerSelectShow) {
        if (this.crmType == "leads") {
          this.stepList[0].status =
            hasFile && hasUser && hasLeadsUser && hasvip ? "finish" : "wait";
        } else {
          this.stepList[0].status =
            hasFile && hasUser && hasvip ? "finish" : "wait";
        }
      } else {
        this.stepList[0].status = hasFile ? "finish" : "wait";
      }
    },

    /**
     * 公海数据
     */
    getPoolList() {
      crmCustomerPoolNameListAPI()
        .then((res) => {
          this.poolList = res.data || [];
          this.poolId = this.poolList.length > 0 ? this.poolList[0].poolId : "";
        })
        .catch(() => {});
    },

    // 关闭操作
    closeView() {
      this.$emit("update:show", false);
      if (this.stepsActive == 3) {
        this.$bus.emit("import-crm-done-bus", this.crmType);
        Lockr.rm("crmImportInfo");
      }
      this.$emit("close", this.stepsActive == 3 ? "finish" : "");
    },

    /**
     * 重置页面数据
     */
    resetData() {
      this.repeatHandling = 2;
      this.file = {
        name: "",
      };
      this.user = "";
      this.leadsUserId = "";

      this.stepsActive = 1;
      this.stepList = [
        {
          icon: "wk wk-upload",
          title: "上传文件",
          status: "wait",
        },
        {
          icon: "wk wk-data-import",
          title: "导入数据",
          status: "wait",
        },
        {
          icon: "wk wk-success",
          title: "导入完成",
          status: "wait",
        },
      ];
      this.resultData = null;
      this.processData = {
        count: 0,
        status: "",
      };
      this.messageId = null;
    },

    /**
     * 获取验证字段
     */
    getField() {
      var params = {
        label: crmTypeModel[this.crmType],
      };
      if (this.crmType == "roiMoney") {
        this.fieldList = [
          {
            fieldName: "putinPlatform",
            name: "投放平台",
          },
          {
            fieldName: "putinMoney",
            name: "投放金额",
          },
          {
            fieldName: "practicalPutinMoney",
            name: "实际投放金额",
          },
          {
            fieldName: "coursePeriods",
            name: "课程期数",
          },
          {
            fieldName: "putinDate",
            name: "投放日期",
          },
        ];
      } else if (this.crmType == "putinStatistics") {
        this.fieldList = [
          {
            fieldName: "putinPlatform",
            name: "投放平台",
          },
          {
            fieldName: "putinMoney",
            name: "投放金额",
          },
          {
            fieldName: "practicalPutinMoney",
            name: "实际投放金额",
          },
          {
            fieldName: "coursePeriods",
            name: "课程期数",
          },
          {
            fieldName: "putinDateStart",
            name: "投放开始日期",
          },
          {
            fieldName: "putinDateEnd",
            name: "投放结束日期",
          },
          {
            fieldName: "leadsEnteringForm",
            name: "线索录入有效表单",
          },
          {
            fieldName: "addCustomerServiceNum",
            name: "加客服数量",
          },
          {
            fieldName: "addCustomerServiceRate",
            name: "加客服率",
          },
          {
            fieldName: "smallAmountNum",
            name: "小额报课数量",
          },
          {
            fieldName: "smallAmountRate",
            name: "小额报课率",
          },
          {
            fieldName: "largeAmountTurnover",
            name: "大额成交数",
          },
          {
            fieldName: "largeAmountTurnoverRate",
            name: "大额成交率",
          },
          {
            fieldName: "largeAmountTurnoverMoney",
            name: "大额成交金额",
          },
          {
            fieldName: "currentPeriodRoi",
            name: "当期ROI",
          },
        ];
      } else {
        filedGetFieldAPI(params)
          .then((res) => {
            this.fieldList = res.data;
          })
          .catch(() => {});
      }
    },
  },
};
</script>

<style scoped lang="scss">
// 进度条 start------------
.step_box {
  display: flex;
  padding: 0 20px;
  margin-bottom: 20px;
  .step_1,
  .step_2,
  .step_3 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    margin: 5px 0;
    height: 42px;
    position: relative;
    margin-right: 5px;
    background-color: #eaf3ff;
    padding: 10px 30px;
    color: #7ab3ff;
    span i {
      padding-right: 4px;
      font-size: 19px;
    }
    div:first-child {
      width: 42px;
      height: 42px;
      position: absolute;
      top: 0px;
      left: -20px;
      background-color: white;
    }
    div:last-child {
      width: 42px;
      height: 42px;
      position: absolute;
      background-color: #eaf3ff;
      z-index: 1;
      top: 0;
      right: -21px;
    }
  }
  .step_1 {
    div:first-child {
      background-color: #eaf3ff;
      border-radius: 22px;
      transform: rotate(45deg);
      z-index: 1;
    }
    div:last-child {
      transform: scale(0.707) rotate(45deg);
    }
  }
  .step_2 {
    div:first-child {
      transform: scale(0.707) rotate(45deg);
    }
    div:last-child {
      -webkit-transform: scale(0.707) rotate(45deg);
      transform: scale(0.707) rotate(45deg);
    }
  }
  .step_3 {
    div:first-child {
      transform: scale(0.707) rotate(45deg);
    }
    div:last-child {
      border-radius: 22px;
      transform: rotate(45deg);
    }
  }
  // 已完成
  .step_finish_1,
  .step_finish_2,
  .step_finish_3 {
    background: #eaf3ff;
    color: #7ab3ff;
    div:last-child {
      background-color: #eaf3ff;
    }
  }
  .step_finish_1 div:first-child {
    background: #eaf3ff;
  }
  .step_error_1,
  .step_error_2,
  .step_error_3 {
    color: #f56c6c !important;
  }
  // 已完成 end
  // 进行中
  .step_process_1,
  .step_process_2,
  .step_process_3 {
    color: #2362fb;
  }
  // 进行中 end
}
// 进度条 end----------------
.el-steps {
  margin-bottom: 15px;

  /deep/ .el-step__title {
    font-size: 14px;
  }

  /deep/ .el-step.is-simple .el-step__arrow::before,
  /deep/ .el-step.is-simple .el-step__arrow::after {
    height: 10px;
    width: 2px;
  }

  /deep/ .el-step.is-simple .el-step__arrow::after {
    transform: rotate(45deg) translateY(3px);
  }

  /deep/ .el-step.is-simple .el-step__arrow::before {
    transform: rotate(-45deg) translateY(-2px);
  }
}

.step-section {
  min-height: 300px;
  position: relative;

  /deep/ .el-loading-spinner {
    top: 45%;

    .el-icon-loading {
      font-size: 40px;
      color: #999;
    }

    .el-loading-text {
      color: #333;
      margin: 8px 0;
    }
  }

  &__tips {
    color: #999;
    font-size: 12px;
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    text-align: center;
    z-index: 3000;
  }
}

.sections {
  font-size: 14px;
  color: #333;

  &__title {
    color: #333;
    font-weight: 600;
  }

  &__tips {
    padding-left: 30px;
    margin: 8px 0 15px;
    color: #999;
    font-size: 12px;
    line-height: 1.4;
  }

  .download {
    cursor: pointer;
    color: #0066f9;
  }
}

.sections__tips + .content {
  padding-top: 0;
}

.content {
  padding: 10px 10px 10px 30px;

  .el-select {
    width: 600px;
  }

  .user-cell {
    width: 600px;
  }
}

#importInputFile {
  display: none;
}

.file-select {
  /deep/ .el-input {
    width: 510px;
    .el-input__inner {
      border-radius: 4px 0px 0px 4px;
    }
  }

  button {
    width: 90px;
    height: 34px;
    border-radius: 0px 4px 4px 0px;
  }
}

.is-hidden {
  visibility: hidden;
}

.history-btn {
  float: left;
  margin-left: 15px;
}

// 结果信息
.result-info {
  text-align: center;
  padding-top: 80px;

  &__icon {
    font-size: 40px;
    color: $xr-color-primary;
  }
  &__erroricon {
    font-size: 40px;
    color: #ff6161;
  }

  &__des {
    margin-top: 15px;
    color: #333;
    font-size: 14px;
  }

  &__detail {
    margin-top: 15px;
    font-size: 12px;
    color: #666;

    &--all {
      color: #333;
      font-weight: 600;
    }

    &--suc {
      color: $xr-color-primary;
      font-weight: 600;
    }

    &--err {
      color: #f94e4e;
      font-weight: 600;
    }
  }

  &__btn--err {
    margin-top: 10px;
  }
}

/deep/ .el-dialog__title {
  color: #000;
  font-weight: bold !important;
}

/deep/ .el-dialog__body {
  padding: 0 20px 40px 20px;
}
.vip_import_tips{
  padding-left: 30px;
  margin: 0 0 15px;
  color: #F56C6C;
  font-size: 12px;
  line-height: 1.4;
}
</style>
